<template>
  <h1>房源详情页</h1>
  <a-carousel arrows style="width: 50%;display: inline-block;">
  <template #prevArrow>
    <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
      <left-circle-outlined />
    </div>
  </template>
  <template #nextArrow>
    <div class="custom-slick-arrow" style="right: 10px">
      <right-circle-outlined />
    </div>
  </template>
  <div v-for="img in imgList">
    <a-image
      width="100%"
      :src=img
    />
  </div>
</a-carousel>
<p @click="showModal" style="position: absolute;right: 200px;top: 70px;color: aqua;cursor: pointer;">编辑基本信息</p>
<a-descriptions :title="descriObj.rent" style="width: 45%;display: inline-block;float: right;">
    <a-descriptions-item label="面积">{{ descriObj.area }}</a-descriptions-item>
    <a-descriptions-item label="朝向">{{ descriObj.headShow }}</a-descriptions-item>
    <a-descriptions-item label="楼层">{{ descriObj.floor }}</a-descriptions-item>
    <a-descriptions-item label="小区">{{ descriObj.communityName }}</a-descriptions-item>
    <a-descriptions-item label="建筑类型">
      {{ descriObj.typeShow }}
    </a-descriptions-item>
  </a-descriptions>
  <a-modal v-model:open="open" title="编辑房源" @ok="updateHouse">
    <a-form
        ref="formRef"
        :labelCol="{style:{width:'100px'}}"
        :model="formData">
        <a-row
          :gutter="[50, 20]">
          <a-col :span="24">
            <a-form-item
              label="房源面积"
              name="area">
              <a-input
                v-model:value="formData.area"
                placeholder="请输入房源面积"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="小区名称"
              name="communityName">
              <a-input
                v-model:value="formData.communityName"
                placeholder="请输入小区名称"/>
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item
              label="楼层"
              name="floor">
              <a-input
                v-model:value="formData.floor"
                placeholder="请输入楼层" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="建筑类型"
              name="houseType">
              <a-select
                ref="select"
                v-model:value="formData.houseType"
                :options="houseTypeOptions"
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="朝向"
              name="head">
              <a-checkbox-group
                v-model:value="formData.head"
                name="checkboxgroup"
                :options="headStatusOptions" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import{ message }from "ant-design-vue"
import axios from 'axios';
const route = useRoute()
const houseId = route.params.id as string
const imgList = ref([])
interface DescriObj {
  rent: number | string
  area: number | string
  headShow: string
  floor: number | string
  communityName: string
  head:string[]
  typeShow: string
}

const descriObj = ref<DescriObj>({
  rent:'',
  area:'',
  headShow:'',
  floor:'',
  head:[],
  communityName:'',
  typeShow:''
})
const open = ref<boolean>(false);
  const headStatusOptions = [
  {
    value: '1',
    label: '东',
  },
  {
    value: '2',
    label: '西',
  },
  {
    value: '3',
    label: '南',
  },
  {
    value: '4',
    label: '北',
  },
]

const houseTypeOptions = [
  {
    value: '1',
    label: '板楼',
  },
  {
    value: '2',
    label: '塔楼',
  },
  {
    value: '3',
    label: '平层',
  },
  {
    value: '4',
    label: '别墅',
  },
]
// 表单数据类型定义
interface FormData {
  houseNo: string
  area: number | null
  communityName: string
  head: number[]
  floor: number | null
  houseType: number | null
  loggingDate: string[]
}

// 表单数据
const formData = ref<FormData>({
  houseNo: '',
  area: null,
  communityName: '',
  head: [],
  floor: null,
  houseType: null,
  loggingDate: []
})
const convertHouseType = (type:number) => {
  switch (type){
        case 1:
          return '板楼'
          break;
        case 2:
          return '塔楼'
          break;
        case 3:
          return '平层'
          break;
        case 4:
          return '别墅'
          break;
        default:
          return ''
      }
}
const convertHeadName = (head: []) => {
  let showHead = ''
  head.forEach(item => {
    switch (item){
        case 1:
          showHead += '东'
          break;
        case 2:
          showHead += '西'
          break;
        case 3:
          showHead += '南'
          break;
        case 4:
          showHead += '北'
          break;
        default:
        }
      })
      return showHead
  // return contractSceneOptions.find(item => item.value === code)?.label || ''
}

/**
 * handleGoback
 * @description 返回列表
 */
const initHouseDetail = () => {
  axios.get(`/api/houses/${houseId}`).then((res: { data: { rent: string | number;images:[], houseType:number, area: string | number; head: [], headShow: string; floor: string | number; communityName: string; typeShow: string; }; }) => {
  res.data.headShow = convertHeadName(res.data.head)
  res.data.typeShow = convertHouseType(res.data.houseType)
  imgList.value = res.data.images
  descriObj.value = res.data
}).catch(() => {
  message.error('请求失败')
})
}
const updateHouse = () =>{
  const { communityName, area, head, floor, houseType} = formData.value
  axios.post('/api/houses/update', {
        houseId: houseId,
        communityName,
        area,
        head,
        floor,
        houseType,
      }).then(() => {
        message.success('删除成功！')
        initHouseDetail()
      }).catch(() => {
        message.error('请求失败')
      })
}
const showModal = () => {
  open.value = true;
}
initHouseDetail()

</script>
<style lang="less" scoped>
.title{
    font-size: 18px;
    line-height: 32px;
}
.container{
    width: 900px;
    padding: 0 0 20px;
}
:deep(.slick-slide) {
text-align: center;
height: 500px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
width: 25px;
height: 25px;
font-size: 25px;
color: #fff;
background-color: rgba(31, 45, 61, 0.11);
transition: ease all 0.3s;
opacity: 0.3;
z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
color: #fff;
opacity: 0.5;
}

:deep(.slick-slide h3) {
color: #fff;
}
</style>
